<template>
    <div id="myChart"  style="height: 45vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "areaEchart",
  data() {
    return {
      chart: null,
      options: {},
      max: "", //最大value值
      min: "", // 最小value值
      type: 0
    };
  },
  created() {
    // this.getData();
  },
  mounted() {
    this.initOptions();
    this.initCharts();
  },
  methods: {
    initOptions() {
      this.options = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          text: "今年各指标月度分布情况"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["食品安全", "信用监管", "行政执法", "一品一码"]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月","八月", "九月", "十月","十一月","十二月"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "食品安全",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)"
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: [140, 232, 101, 264, 90, 340, 250, 345, 66, 334, 554, 545]
          },
          {
            name: "信用监管",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(0, 221, 255)"
                },
                {
                  offset: 1,
                  color: "rgb(77, 119, 255)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: [120, 282, 111, 234, 220, 340, 310,567,234,543,112,566]
          },
          {
            name: "行政执法",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(55, 162, 255)"
                },
                {
                  offset: 1,
                  color: "rgb(116, 21, 219)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: [320, 132, 201, 334, 190, 130, 220,43,455,666,774,565]
          },
          {
            name: "一品一码",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 0, 135)"
                },
                {
                  offset: 1,
                  color: "rgb(135, 0, 157)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: [220, 402, 231, 134, 190, 230, 120,230,345,782,330,776]
          }
        ]
      };
    },
    initCharts() {
      // echarts.registerMap("平潭", pingtan);
      this.chart = echarts.init(document.getElementById("myChart"));

      this.chart.setOption(this.options,true);
    }
  }
};

</script>
